<template>
  <div class="vk-collapse">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { provide, ref, watch } from 'vue';
import { collapseContentKey, type CollapseEmits, type CollapseProps, type NativeType } from './types';

defineOptions({
  name: "VkCollapse"
})
const props = defineProps<CollapseProps>()
const emits = defineEmits<CollapseEmits>()
const activeNames = ref<NativeType[]>(props.modelValue)
watch(() => props.modelValue, () =>{
  activeNames.value = props.modelValue
})
if (props.accordion && activeNames.value.length > 1) {
  console.log('accordion mode shuold only have one active item')
}
const handleItemClick = (item: NativeType) => {
  if (props.accordion) {
    activeNames.value = [activeNames.value[0] === item ? '' : item]
  } else {
    const index = activeNames.value.indexOf(item);
    if (index > -1) {
      activeNames.value.splice(index, 1)
    } else {
      activeNames.value.push(item)
    }
  }
  emits('update:modelValue', activeNames.value);
  emits('change', activeNames.value)
}
provide(collapseContentKey, {
  activeNames,
  handleItemClick
})
</script>

<style lang="scss" scoped></style>